资讯详情由于移动设备对HTML5的较好支持，经常有活动用刮奖、绘制的小游戏和滑动模糊的效果在微信朋友圈疯狂的转发。这些都是利用html5的Canvas绘图功能和三维效果。
h5移动开发的重点特性。
第一个H5功能特性：Canvas绘图功能
HTML5标签用于绘制图像(通过脚本，通常是 JavaScript)。
不过，元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性h5教程网站。
本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
详细的H5的canvas使用请参考《HTML 5 Canvas 参考手册》
Canvas 是 H5 的画布元素，即一个 DOM 元素。通过脚本控制逻辑给画布上增加文字与图像，而浏览器只需要绘制一次形成一幅图。
使用canvas开发的优点和好处：
1、只用一个 Canvas DOM 元素，降低 DOM 数量与渲染的复杂度，可以将原来 CPU 密集型变成 GPU 操作。绝大多数针对 Canvas 是用硬件 GPU 加速渲染。
2、GPU 的 ALU(计算单元) 比 CPU 要多很多，而控制运算(逻辑)则可以用 JavaScript 在 CPU 里做，甚至还可以用 WebWorker 多线程处理 CPU 密集型的操作，从而达到充分利用硬件资源的能力。
3、Canvas 画布无论是 JavaScript & H5，还是 native 都有类似的 API。所以：本地调试可在浏览器里完成。
4、最差方案可以用 Canvas UI 跑在浏览器里。
5、更进一步，可以把浏览器 Canvas 接口的反射到用 native 画布上，以此提高性能用h5写网页。
下面让我们开始了解H5的canvas代码具体编写：
HTML部分只要声明下canvas的id即可。当然你也可以定义绘制的画布的长宽。
H5的canvas的具体使用流程：先定义绘图的画布。其次，构建绘图环境对象。最后，开始绘制我们想要的元素和图形。
25学堂的小编为了让各位童鞋方便理解：
你可以将H5的绘图功能类比为Flash，但是唯一的决定性区别是，Flash做出来的动画无法在移动端的浏览器中浏览，因为Adobe早已在2012年就停止了对移动端flash的开发。毫无疑问，未来的移动网页游戏和动画会是H5的天下。
从技术实现的角度，H5配合JS(一种程序语言)可以做出任何二维动画，并且因为是网页元素，所有元素均可以监测到用户点击的数据，也就是说你可以知道用户在H5动画网页中的所有交互行为。但是，具体到实际应用，我们就要考虑周期、成本，和用户体验的问题，复杂的动画相应的制作周期和成本会提高，同时也有可能影响加载速度等用户体验相关的问题h5产品设计。
下面就是25学堂推荐给各位学习H5移动开发Canvas绘图功能资料：
基础必读的：《HTML 5 Canvas 参考手册》
1、如何开发一个简单的HTML5 Canvas 小游戏
2、HTML5- Canvas入门详细教程
3、HTML5教程资源分享第一站
4、HTML5 Canvas实战之刮奖效果
如果你们还有更好的关于canvas的教程和资源可以分享给25学堂。
下面再来推荐慕课网的关于H5的canvas的视频教程：
炫丽的倒计时效果Canvas绘图与动画基础
第二个H5功能特性：三维效果
H5的华丽效果离不开一种叫CSS的技术，形象的说，如果把HTML5比作漫画的素描稿，CSS就是上色用的，相当于word界面上方的格式工具栏，如果没有CSS我们看到的H5网页就只能以“素颜”见人了。如果你熟悉互联网技术的命名规则你应该能知道CSS3就是CSS的升级版本。
在CSS3中有个非常酷的功能是三维渲染，也就说H5中能做出3D动画甚至3D游戏。目前我们看到的H5中CSS3 3D的应用较少，这个也许会是下一个营销类H5应用的热点，建议大家持续关注。
代表案例：程序员给女朋友用HTML5制作的3D相册
程序员给女朋友用HTML5制作的3D相册，使用鼠标拖拽，能看到3D旋转效果，点击相片，相片能放大，移近。程序员发挥自己的专长，这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术，需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。
欣赏地址：http://www.webhek.com/misc/3d-album
